<template>
  <div>
    <!-- 这是一个外层的div容器，用于包裹下面的所有元素 -->
    <div style="margin-bottom: 5px;">
      <!-- 这个内层div用于设置内部元素的布局，底部有5px的外边距 -->
      <el-input v-model="name" placeholder="请输入名字" suffix-icon="el-icon-search" style="width: 200px;"
                @keyup.enter.native="loadPost"></el-input>
      <!-- el-input组件，用于输入名字：
          - v-model="name"：双向绑定数据，将输入的值与组件中的name变量关联起来。
          - placeholder="请输入名字"：设置输入框的占位提示文本。
          - suffix-icon="el-icon-search"：在输入框右侧添加一个搜索图标。
          - style="width: 200px;"：设置输入框宽度为200px。
          - @keyup.enter.native="loadPost"：监听原生的回车键按下事件，触发loadPost方法 -->
      <el-select v-model="sex" filterable placeholder="请选择性别" style="margin-left: 5px;">
        <!-- el-select组件，用于选择性别：
            - v-model="sex"：双向绑定选择的值与组件中的sex变量关联起来。
            - filterable：使选择框可过滤，方便查找选项。
            - placeholder="请选择性别"：设置选择框的占位提示文本。
            - style="margin-left: 5px;"：设置左边距为5px -->
        <el-option
            v-for="item in sexs"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
        <!-- el-option组件，通过v-for循环渲染性别选项，根据sexs数组中的数据生成下拉选项，
            每个选项的key、label、value分别对应数组中对象的相应属性值 -->
      </el-select>

      <el-button type="primary" style="margin-left: 5px;" @click="loadPost">查询</el-button>
      <!-- el-button组件，按钮样式为主要样式（primary），左边距5px，点击时触发loadPost方法，用于执行查询操作 -->

      <el-button type="success" @click="resetParam">重置</el-button>
      <!-- el-button组件，按钮样式为成功样式（success），点击时触发resetParam方法，用于重置输入的参数 -->

      <el-button type="primary" style="margin-left: 5px;" @click="add">新增</el-button>
      <!-- el-button组件，按钮样式为主要样式（primary），左边距5px，点击时触发add方法，用于新增数据 -->
    </div>

    <el-table :data="tableData"
              :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
              border
    >
      <!-- el-table组件，用于展示表格数据：
          - :data="tableData"：将表格要展示的数据与tableData变量绑定。
          - :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"：设置表头单元格的背景色和文字颜色。
          - border：显示表格边框 -->
      <el-table-column prop="id" label="ID" width="60">
      </el-table-column>
      <!-- el-table-column组件，定义表格中的列，prop指定对应数据中的属性名，label是表头显示的文本，width设置列宽 -->

      <el-table-column prop="no" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="80">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="80">
        <template slot-scope="scope">
          <!-- 使用template配合slot-scope来获取当前行的数据scope.row，用于自定义列的内容展示 -->

          <el-tag
              :type="scope.row.sex === 1? 'primary' : 'success'"
              disable-transitions>{{scope.row.sex === 1? '男' : '女'}}</el-tag>
          <!-- el-tag组件，根据当前行的性别数据（scope.row.sex）来设置不同的样式（primary表示男，success表示女）并显示相应文本 -->
        </template>
      </el-table-column>

      <el-table-column prop="roleId" label="角色" width="120">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.roleId === 0? 'danger' : (scope.row.roleId === 1? 'primary' : 'success')"
              disable-transitions>{{scope.row.roleId === 0? '超级管理员' :
              (scope.row.roleId === 1? '管理员' : '用户')}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="电话" width="180">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <!-- el-button组件，按钮样式为成功样式（success），尺寸为小（small），点击时触发mod方法，并传入当前行数据用于编辑操作 -->
          <el-popconfirm
              title="确定删除吗？"
              @confirm="del(scope.row.id)"
              style="margin-left: 5px;"
          >
            <el-button slot="reference" size="small" type="danger" >删除</el-button>
          </el-popconfirm>
          <!-- el-popconfirm组件，用于弹出确认框，点击内部的el-button（作为触发元素，通过slot="reference"指定）时，
              弹出确认提示“确定删除吗？”，确认后触发del方法并传入当前行的id进行删除操作 -->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20,30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!-- el-pagination组件，用于分页：
        - @size-change="handleSizeChange"：监听每页显示数量改变事件，触发handleSizeChange方法。
        - @current-change="handleCurrentChange"：监听当前页码改变事件，触发handleCurrentChange方法。
        - :current-page="pageNum"：绑定当前页码数据。
        - :page-sizes="[5, 10, 20,30]"：设置可供选择的每页显示数量选项。
        - :page-size="pageSize"：绑定当前每页显示的数量。
        - layout="total, sizes, prev, pager, next, jumper"：定义分页组件的布局，包含总条数、每页数量选择、上一页、页码、下一页、跳转到指定页等功能。
        - :total="total"：绑定总数据条数 -->

    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <!-- el-dialog组件，用于弹出对话框：
          - title="提示"：设置对话框的标题。
          - :visible.sync="centerDialogVisible"：双向绑定对话框的显示隐藏状态，通过centerDialogVisible变量控制。
          - width="30%"：设置对话框宽度为30%。
          - center：使对话框居中显示 -->

      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <!-- el-form组件，用于表单验证和数据收集：
            - ref="form"：给表单设置一个引用，方便后续通过this.$refs.form操作表单。
            - :rules="rules"：绑定表单验证规则，rules对象中定义了各个表单字段的验证规则。
            - :model="form"：绑定表单数据对象，form对象中包含各个表单字段的数据。
            - label-width="80px"：设置表单标签的宽度为80px -->
        <el-form-item label="账号" prop="no">
          <!-- el-form-item组件，用于包裹表单中的单个输入项，label设置标签文本，prop关联对应的表单数据字段 -->
          <el-col :span="20">
            <el-input v-model="form.no"></el-input>
          </el-col>
          <!-- el-col组件，用于布局，这里设置占20列（基于12/24列布局系统等），内部的el-input用于输入账号信息，通过v-model与form.no双向绑定 -->
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-col :span="20">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :span="20">
            <el-input v-model="form.password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-col :span="20">
            <el-input v-model="form.age"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <!-- el-radio-group组件，用于单选框组，通过v-model与form.sex绑定选择的值 -->
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
            <!-- el-radio组件，定义具体的单选选项，label设置选项的值 -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-col :span="20">
            <el-input v-model="form.phone"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
      <!-- 在对话框的footer插槽中定义两个按钮，一个用于取消关闭对话框，一个用于点击确定执行保存等相关操作 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AdminManage", // 组件名称
  data() {
    // 数据验证函数
    let checkAge = (rule, value, callback) => {
      // 验证年龄是否过大
      if(value > 150){
        callback(new Error('年龄输入过大'));
      } else {
        callback();
      }
    };
    let checkDuplicate = (rule, value, callback) => {
      // 验证账号是否重复
      if(this.form.id){
        return callback();
      }
      this.$axios.get(this.$httpUrl+"/user/findByNo?no="+this.form.no).then(res => res.data).then(res => {
        if(res.code != 200){
          callback()
        } else {
          callback(new Error('账号已经存在'));
        }
      })
    };

    return {
      // 数据属性定义
      tableData: [], // 表格数据
      pageSize: 10, // 每页显示条数
      pageNum: 1, // 当前页码
      total: 0, // 总条数
      name: '', // 搜索名字
      sex: '', // 搜索性别
      sexs: [ // 性别选项
        { value: '1', label: '男' },
        { value: '0', label: '女' }
      ],
      centerDialogVisible: false, // 对话框是否可见
      form: { // 表单数据模型
        id: '',
        no: '',
        name: '',
        password: '',
        age: '',
        phone: '',
        sex: '0',
        roleId: '1'
      },
      rules: { // 表单验证规则
        no: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
          { validator: checkDuplicate, trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur' },
          { pattern: /^([1-9][0-9]*){1,3}$/, message: '年龄必须为正整数字', trigger: "blur" },
          { validator: checkAge, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    // 方法定义
    resetForm() {
      this.$refs.form.resetFields(); // 重置表单
    },
    // $refs.form：Vue 提供的一种直接访问子组件的方式，
    //  这里用来获取表单元素并调用它的resetFields方法来重置表单。
    del(id) {
      console.log(id)
      //axios请求
      this.$axios.get(this.$httpUrl+'/user/del?id='+id).then(res => res.data).then(res => {
        console.log(res)
        if(res.code == 200){
          this.$message({ // 消息提示
            message: '操作成功！',
            type: 'success'
          });
          this.loadPost() // 重新加载数据
        } else {
          this.$message({ // 消息提示
            message: '操作失败！',
            type: 'error'
          });
        }
      })
    },
    mod(row) {
      console.log(row)
      this.centerDialogVisible = true
      this.$nextTick(() => { // 确保DOM更新后执行
        // 赋值到表单
        this.form.id = row.id
        this.form.no = row.no
        this.form.name = row.name
        this.form.password = ''
        this.form.age = row.age + ''
        this.form.sex = row.sex + ''
        this.form.phone = row.phone
        this.form.roleId = row.roleId
      })
    },
    add() {
      this.centerDialogVisible = true
      this.$nextTick(() => { // 确保DOM更新后执行
        this.resetForm() // 重置表单
      })
    },
    doSave() {
      this.$axios.post(this.$httpUrl+'/user/save', this.form).then(res => res.data).then(res => {
        console.log(res)
        if(res.code == 200){
          this.$message({ // 消息提示
            message: '操作成功！',
            type: 'success'
          });
          this.centerDialogVisible = false // 关闭对话框
          this.loadPost() // 重新加载数据
          this.resetForm() // 重置表单
        } else {
          this.$message({ // 消息提示
            message: '操作失败！',
            type: 'error'
          });
        }
      })
    },
    doMod() {
      this.$axios.post(this.$httpUrl+'/user/update', this.form).then(res => res.data).then(res => {
        console.log(res)
        if(res.code == 200){
          this.$message({ // 消息提示
            message: '操作成功！',
            type: 'success'
          });
          this.centerDialogVisible = false // 关闭对话框
          this.loadPost() // 重新加载数据
          this.resetForm() // 重置表单
        } else {
          this.$message({ // 消息提示
            message: '操作失败！',
            type: 'error'
          });
        }
      })
    },
    save() {
      this.$refs.form.validate((valid) => { // 表单验证
        if (valid) {
          if(this.form.id){
            this.doMod(); // 修改操作
          } else {
            this.doSave(); // 保存操作
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1
      this.pageSize = val
      this.loadPost() // 重新加载数据
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.loadPost() // 重新加载数据
    },
    loadGet() {
      this.$axios.get(this.$httpUrl+'/user/list').then(res => res.data).then(res => {
        console.log(res)
      })
    },
    resetParam() {
      this.name = ''
      this.sex = ''
    },
    loadPost() {
      this.$axios.post(this.$httpUrl+'/user/listPageC1', {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        param: {
          name: this.name,
          sex: this.sex,
          roleId: '1'
        }
      }).then(res => res.data).then(res => {
        console.log(res)
        if(res.code == 200){
          this.tableData = res.data // 设置表格数据
          this.total = res.total // 设置总条数
        } else {
          alert('获取数据失败')
        }
      })
    }
  },
  beforeMount() {
    // this.loadGet(); // 组件挂载前加载数据（已注释）
    this.loadPost() // 组件挂载前加载分页数据
  }
//   beforeMount：这是一个生命周期钩子，当组件即将被挂载到DOM上时触发。
// this在这里依然指的是当前组件实例。
}
</script>

<style scoped>

</style>